{extend name="public/world"}
{block name="title"}添加供应商{/block}
{block name="style"}
<style type="text/css">
    .layui-form-label {width:110px;}
</style>
{/block}
{block name="container"}
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin">
    <div class="layui-card" style="padding: 20px 0 0 0;height:425px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label label-required">供应商名称</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="text" name="name" value="" lay-verify="required" placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label label-required">供应商分类</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <select name="gid" lay-verify="required" lay-search>
                        <option value="">请选择分类</option>
                        {volist name="treeData" id="tree"}
                        {notempty name="tree.children"}
                        <option value="{$tree.id}" disabled>{$tree.name}</option>
                        {volist name="tree.children" id="child"}
                        <option value="{$child.id}">　　{$child.name}</option>
                        {/volist}
                        {else /}
                        <option value="{$tree.id}">{$tree.name}</option>
                        {/notempty}
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label label-required">合作类型</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <select name="ztype" lay-verify="required">
                        <option value="1">生产厂家</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">缺省银行</label>
                <div class="layui-input-inline" style="width: 230px;">
                    <input type="text" name="bank" value="" placeholder="请输入缺省银行" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width:65px;padding: 7px 5px 7px 0;">缺省账户</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="bank_code" value="" placeholder="请输入缺省账户" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label" style="width:65px;padding: 7px 5px 7px 0;">缺省支行</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="text" name="bank_name" value="" placeholder="请输入支行名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">联系地址</label>
                <div class="layui-input-inline" style="width: 180px;">
                    <select name="city_id" lay-filter="city_id" id="city_id">
                        <option value="">请选择省</option>
                        {volist name="citys" id="city"}
                        <option value="{$city.id}">{$city.name}</option>
                        {/volist}
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 180px;">
                    <select name="city_bid" lay-filter="city_bid" id="city_bid">
                        <option value="">请选择市</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 180px;">
                    <select name="city_cid" lay-filter="city_cid" id="city_cid">
                        <option value="">请选择县/区</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 297px;">
                    <input type="text" name="detailed_address" value="" placeholder="请输入详细地址" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-inline">
                <textarea name="description" placeholder="请输入内容" class="layui-textarea" style="width: 867px;min-height:60px;height:60px;"></textarea>
            </div>
        </div>
        <fieldset class="layui-elem-field layui-field-title">
            <legend>联系人管理</legend>
            <div class="layui-field-box" id="userBox" data-id="1">
                <div class="layui-form-item layui-form-user">
                    <div class="layui-inline">
                        <div class="layui-input-inline" style="width: 100px;margin-left:30px;">
                            <input type="text" name="link_mans[0][name]" value="" placeholder="姓名" autocomplete="off" class="layui-input" lay-verify="required">
                        </div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="link_mans[0][position]" value="" placeholder="职位" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="link_mans[0][phone]" value="" placeholder="电话" autocomplete="off" class="layui-input" lay-verify="tellphone">
                        </div>
                        <div class="layui-input-inline" style="width: 120px;">
                            <input type="text" name="link_mans[0][email]" value="" placeholder="邮件" autocomplete="off" class="layui-input" lay-verify="emptyEmail">
                        </div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="link_mans[0][address]" value="" placeholder="地址" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-input-inline" style="width: 200px;">
                            <input type="text" name="link_mans[0][desc]" value="" placeholder="备注" autocomplete="off" class="layui-input">
                        </div>
                        <button class="layui-btn layui-btn-radius layui-btn-sm addUser">增加联系人</button>
                    </div>
                </div>
            </div>
        </fieldset>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="LAY-front-submit" id="LAY-front-submit" value="确认">
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script id="userView" type="text/html">
    <div class="layui-form-item layui-form-user">
        <div class="layui-inline">
            <div class="layui-input-inline" style="width: 100px;margin-left:30px;">
                <input type="text" name="link_mans[{{ d.did }}][name]" value="" placeholder="姓名" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="link_mans[{{ d.did }}][position]" value="" placeholder="职位" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 100px;">
                <input type="text" name="link_mans[{{ d.did }}][phone]" value="" placeholder="电话" autocomplete="off" class="layui-input" lay-verify="tellphone">
            </div>
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" name="link_mans[{{ d.did }}][email]" value="" placeholder="邮件" autocomplete="off" class="layui-input" lay-verify="emptyEmail">
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" name="link_mans[{{ d.did }}][address]" value="" placeholder="地址" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width: 200px;">
                <input type="text" name="link_mans[{{ d.did }}][desc]" value="" placeholder="备注" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn layui-btn-radius layui-btn-sm layui-btn-danger delUser"><i class="layui-icon">&#xe67e;</i></button>
        </div>
    </div>
</script>
<script>
    //JavaScript代码区域
    layui.use(['form', 'laytpl'], function() {
        var $ = layui.$
            , laytpl = layui.laytpl
            , form = layui.form;
        form.verify({
            tellphone: function(value){
                var mobile = /^1\d{10}$/,phone = /^0\d{2,3}-?\d{7,8}$/;
                var flag = mobile.test(value) || phone.test(value);
                if(!flag){
                    return '请输入正确座机号码或手机号';
                }
            },
            emptyEmail: function(value){
                var email = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                //var flag = /[\S]+/.test(value) && !email.test(value);
                if( /[\S]+/.test(value) && !email.test(value) ){
                    return '邮箱格式不正确';
                }
            }
        });
        form.on('select(city_id)', function(data){
            var id = data.value; //得到被选中的值
            $.ajax({
                url:"/citys/getCity.html",
                data:{'id':id},
                type:"POST",
                dataType:"json",
                success:function(res){
                    if(res.code==1) {
                        $("#city_bid").empty();
                        $("#city_bid").append(new Option("请选择市",''));
                        $("#city_cid").empty();
                        $("#city_cid").append(new Option("请选择县/区",''));
                        $.each(res.data,function(index,item){
                            $("#city_bid").append(new Option(item.name,item.id));
                        });
                        form.render("select");
                    }
                }
            });
        });
        form.on('select(city_bid)', function(data){
            var id = data.value; //得到被选中的值
            $.ajax({
                url:"/citys/getCity.html",
                data:{'id':id},
                type:"POST",
                dataType:"json",
                success:function(res){
                    if(res.code==1) {
                        $("#city_cid").empty();
                        $("#city_cid").append(new Option("请选择县/区",''));
                        $.each(res.data,function(index,item){
                            $("#city_cid").append(new Option(item.name,item.id));
                        });
                        form.render("select");
                    }
                }
            });
        });
        $('.addUser').click(function(){
            var getTpl = userView.innerHTML
            var did = $('#userBox').attr('data-id') || 1;
            laytpl(getTpl).render({did:did}, function(html){
                $('#userBox').attr('data-id', Number(did)+1).append(html);
                $('.delUser').click(function(){
                    $(this).parents('.layui-form-user').remove();
                });
            });
            form.render();
        });
        $('.delUser').click(function(){
            $(this).parents('.layui-form-user').remove();
            form.render();
        });
    });
</script>
{/block}